<template>
  <div id="match-header-container">
    <div class="match-header-row">
      <!-- 倒计时 -->
      <!-- <div class="" v-if="!timeshow">
        结束剩余
        <span>{{ time.d }}</span>
        天
        <span>{{ time.h }}</span>
        时
        <span>{{ time.m }}</span>
        分
        <span>{{ time.s }}</span>
        秒
      </div> -->
      <div class="header-box">
        <el-tooltip effect="dark" :content="title">
          <div class="header-title">
            {{ title }}
          </div>
        </el-tooltip>
        <el-tag v-if="isMatch" class="header-activityTag" :type="jianchatime(match, datenow).type" effect="dark"
          size="default">
          {{ jianchatime(match, datenow).text2 }}
        </el-tag>
        <!-- <div class="header-activityTag" :class="jianchatime(match).type">
          {{ jianchatime(match).text2 }}
        </div> -->
        <span class="savetime" v-if="savetime">已保存 {{ savetime }} &nbsp;
          <el-icon>
            <UploadFilled />
          </el-icon>
        </span>
      </div>
      <div class="match-header-btn-box">
        <div class="">
          <el-button plain class="next-btn" @click="router.push({ name: routername, params: { index: index - 1, }, })"
            :type="(des === 'T' || questionlist.length == 1) ? 'info' : ''"
            :disabled="des === 'T' || questionlist.length == 1">
            <el-icon>
              <ArrowLeftBold />
            </el-icon>
            上一题
          </el-button>
          <span class="question-index-wrapper">
            <span class="question-index">{{ index + 1 }}</span>
            /
            <span class="question-index">{{ questionlist.length }}</span>
          </span>
        </div>
        <el-button plain class="next-btn" @click="router.push({ name: routername, params: { index: index + 1, }, })"
          :type="(des === 'F' || questionlist.length == 1) ? 'info' : ''"
          :disabled="des === 'F' || questionlist.length == 1">
          下一题
          <el-icon>
            <ArrowRightBold />
          </el-icon>
        </el-button>
        <div class="match-drawer-container">
          <el-drawer class="match-el-drawer" size="650px" title="题目列表" direction="ltr" v-model="listshow"
            :with-header="false">
            <Questionlist v-show="listshow" @update:listshow="hiddenList"
              v-bind="{ questions: questionlist, index, routername, userquestion }">
            </Questionlist>
          </el-drawer>
        </div>
        <div>
          <el-button size="default" class="next-btn show-question-list-btn" @click.stop="listshow = !listshow">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-Menu" />
            </svg>
            &nbsp; 查看题目列表
          </el-button>
        </div>
        <el-button size="default" v-if="isMatch" class="next-btn" @click="back">
          返回比赛首页
        </el-button>
      </div>
      <!-- <el-button size="default" :loading="saveloading" class="a18" @click="save">保存试卷</el-button> -->
      <!-- 将按钮移动到 头部 -->
      <div class="match-header-submit-btn-box">
        <el-button size="default" v-if="isMatch && match.format === 'IOI'" class="a18 next-btn" :loading="loading"
          @click="mySubmit(false)"> <el-icon>
            <UploadFilled />
          </el-icon>
          &nbsp; 提交题目
        </el-button>
        <el-button size="default" v-else class="a18 next-btn" :loading="loading" @click="mySubmit"> <el-icon>
            <UploadFilled />
          </el-icon>
          &nbsp; 提交试卷
        </el-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ArrowLeftBold, ArrowRightBold, UploadFilled } from '@element-plus/icons-vue';
import { ElDrawer } from 'element-plus';
import { computed, onMounted, onUnmounted, ref, toRefs, watch } from "vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import { Storekey } from "../../../interface";
import Studycodemodel from "../../../mysql_interface/studycodemodel";
import { jianchatime } from "@/util/jianchatime";
import { SMP } from "./interface";
import Questionlist from "./questionlist.vue";

const p = withDefaults(defineProps<{
  index: number,
  questionlist: Studycodemodel.Imatchquestion[],
  routername?: string,
  userquestion: Studycodemodel.Iuserquestion[],
  time: SMP["time"],
  title: string | undefined,
  submit: any,
  timeshow?: boolean,
  save?: () => {},
  saveloading?: boolean,
  savetime?: string,
  match: SMP["match"],
  isMatch: boolean // 区分测评模式和比赛模式
}>(), { index: 0, routername: "比赛答题", })

const { index, questionlist, userquestion,
  time, title, submit, timeshow, save, saveloading, savetime, match, isMatch } = toRefs(p);
const router = useRouter();
const store = useStore(Storekey)
const datenow = computed(() => {
  return store.state.time
})
const des = ref<"T" | "F" | undefined>("T");

const listshow = ref(false);
function hiddenList(v: boolean) {
  listshow.value = v;
}

onMounted(() => {
  start();
});
onUnmounted(() => {
  // 判空
})

function back() {
  save.value?.();
  router.push({ name: '比赛详情', params: { ID: match.value.ID } })
}

watch(() => index.value, () => { start(); });
function start() {
  if (index.value == 0) {
    des.value = "T";
  } else if (index.value == questionlist.value.length - 1) {
    des.value = "F";
  } else if (questionlist.value.length && index.value >= questionlist.value.length) {
    console.log("in", questionlist.value.length)
    router.push({ name: "比赛答题", params: { index: 0, }, });
  } else {
    des.value = undefined;
  }
}

// 原header
const show = ref(true);
const user = computed(() => {
  return store.state.user
})

const loading = ref(false);
// 提交试卷
function mySubmit(b: boolean) {
  loading.value = true;
  save.value?.();
  setTimeout(() => {
    submit.value(b)
    loading.value = false;
  }, 300);
}
</script>

<style scoped>
#match-header-container {
  padding: 0 3%;

  --container-margin: 20px;
  --container-bg-color: #fff;
}

.match-header-row {
  display: flex;
  height: auto;
  align-items: center;

  margin: var(--container-margin) 0;
  padding: calc(var(--container-margin));
  background-color: var(--container-bg-color);
  border-radius: var(--container-border-radius);
  box-shadow: var(--container-box-shadow);
}

.header-box {
  display: flex;
  align-items: center;
  margin-right: var(--container-margin);
}

.header-title {
  font-size: 1.5rem;
  max-width: 350px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.header-activityTag {
  margin: 0 calc(var(--container-margin) / 2);
  /* display: inline-block; */
}

.match-header-btn-box {
  display: flex;
  height: 60px;
  align-items: center;
}

.match-header-submit-btn-box {
  display: flex;
  justify-content: flex-end;
  flex: auto;
}

.match-drawer-container {
  height: 80vh;
}

.next-btn {
  /* margin-right: 10px; */
  height: 40px;
  border-radius: 5px;
}

.question-index-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.question-index {
  width: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.show-question-list-btn {
  margin: 0 10px;
}

/* 状态 */
.info,
.primary,
.danger,
.success {
  width: 50px;
  height: 24px;
  line-height: 24px;
  color: #fff;
  display: inline-block;
  text-align: justify;
  font-size: 12px;
  font-weight: 400;
  text-align: center;
  border-radius: 5px;
}

/* 赛事结束-已结束 */
.info {
  background-color: rgba(236, 128, 141, 1);

}

/* 立即报名-报名中 */
.primary {
  background: rgb(112, 182, 3);
  /* transform: translateY(-3px); */
}

/* 即将开赛-未开始 */
.danger {
  background: rgb(170, 170, 170);
  /* transform: translateY(-3px); */
}

/* 进入比赛-比赛中 */
.success {
  background: var(--color-cheng);
  /* transform: translateY(-3px); */
}

.savetime {
  color: #8a8f8d !important;
  font-size: 12px;
  display: flex;
  align-items: center;

  /* text-align: center; */
  /* width: 130px !important; */
}
</style>